<template>
  <div class="wang-editor">
    <div :id="elemId"></div>
  </div>
</template>

<script>
import E from "wangeditor";
import {uploadImage} from "@/network/upload";

export default {
  name: "WangEditor",
  props: {
    // 编辑器高度，默认为500
    height: {
      type: Number,
      default: 500
    },
    elemId: {
      type: String,
      default: "editor"
    }
  },
  data() {
    return {
      editor: null,
      // 编辑区的内容（html）
      content: "",
    }
  },
  methods: {
    // 获取编辑区的html
    getHtml() {
      return this.editor.txt.html();
    },
    // 获取编辑区的文本
    getTxt() {
      return this.editor.txt.text();
    },
    // 设置编辑区的内容
    setContent(inputHtml) {
      this.editor.txt.html(inputHtml);
    }
  },
  mounted:function(){
    this.editor = new E("#"+this.elemId);
    // 配置 onchange 回调函数
    // let That = this;
    // this.editor.config.onchange = function (newHtml) {
    //   That.content = newHtml;
    // };
    // 配置图片上传
    this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      console.log(resultFiles);
      for(let file of resultFiles) {
        let imageFormData = new FormData();
        imageFormData.append("file", file);
        uploadImage(imageFormData).then(res=> {
          // 上传图片，返回结果，将图片插入到编辑器中
          insertImgFn(res.data['filePath']);
        })
      }
    }
    // 设置编辑区域高度为 500px
    this.editor.config.height = this.height

    this.editor.config.zIndex = 1
    this.editor.create()
  },
  beforeUnmount() {
    // this.editor.dis
  }
}
</script>

<style scoped>

</style>
